<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  html,
  body {
    height: 100%;
    min-height: 100%;
    margin: 0;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2b2b47;
  }

  body .rainbow-loader {
    animation: rotate 1.5s linear infinite;
    border-radius: 100%;
    position: relative;
    background-image: conic-gradient(from 0deg at 50% 50%, transparent 60deg, purple 110deg, blue 160deg, green 210deg, yellow 260deg, orange 310deg, red 360deg);
    width: 100px;
    height: 100px;
  }

  body .rainbow-loader:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-image: inherit;
    animation: pulse 6s linear infinite;
  }

  body .rainbow-loader:after {
    content: '';
    display: block;
    position: absolute;
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    background: #2b2b47;
    z-index: 1;
    border-radius: 100%;
    top: 2px;
    left: 2px;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes pulse {
    0% {
      filter: blur(5px);
    }

    50% {
      filter: blur(20px);
    }

    100% {
      filter: blur(5px);
    }
  }
</style>

<body>
  <div class="rainbow-loader"></div>
</body>

</html>